<template>
  <div class="textbook">
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label">
          <img src="../assets/stu/ico_word_blue.png"/>
          文本教程
        </span>
      <div>
        <div>
          <el-button @click="prev">上一页</el-button>
          <el-button @click="next">下一页</el-button>
          &nbsp; &nbsp;
          <span>Page: <span v-text="page_num"></span> / <span v-text="page_count"></span></span>
        </div>
        <canvas id="the-canvas"></canvas>
      </div>
      </el-tab-pane>
      <el-tab-pane>  <!--FIXME：这里界面有问题 foot-->
        <span slot="label">
          <img src="../assets/stu/ico_video_blue.png"/>
          视频教程
        </span>
        <video preload="auto" width="800" height="500" controls
               :src="taskINFO.video" type='video/mp4'>
        </video>
        <div>
          <el-button  @click="toMonitor" style="float: right">下一步</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script>
  import PDFJS from 'pdfjs-dist'
  import {updateStep} from '@/api/api'
  PDFJS.workerSrc = '/static/pdfjs/pdf.worker.js'
  export default {
    data () {
      return {
//        pdfUrl: '',
//        videoUrl: '',
        pdfDoc: null,
        pageNum: 1,
        pageRendering: false,
        pageNumPending: null,
        scale: 0.8,
        page_num: 0,
        page_count: 0,
        taskINFO: this.$store.state.taskINFO
      }
    },
    methods: {
      renderPage (num) {
        let vm = this
        this.pageRendering = true
        let canvas = document.getElementById('the-canvas')
        // Using promise to fetch the page
        this.pdfDoc.getPage(num).then(function (page) {
          let viewport = page.getViewport(vm.scale)
          canvas.height = viewport.height
          canvas.width = viewport.width

          // Render PDF page into canvas context
          let renderContext = {
            canvasContext: vm.ctx,
            viewport: viewport
          }
          let renderTask = page.render(renderContext)

          // Wait for rendering to finish
          renderTask.promise.then(function () {
            vm.pageRendering = false
            if (vm.pageNumPending !== null) {
              // New page rendering is pending
              vm.renderPage(vm.pageNumPending)
              vm.pageNumPending = null
            }
          })
        })

        // Update page counters
        vm.page_num = vm.pageNum
      },
      prev () {
        let vm = this
        if (vm.pageNum <= 1) {
          return
        }
        vm.pageNum--
        vm.queueRenderPage(vm.pageNum)
      },
      next () {
        let vm = this
        if (vm.pageNum >= vm.page_count) {
          return
        }
        vm.pageNum++
        vm.queueRenderPage(vm.pageNum)
      },
      queueRenderPage (num) {
        if (this.pageRendering) {
          this.pageNumPending = num
        } else {
          this.renderPage(num)
        }
      },
      toMonitor () {
        this.$store.dispatch('updateStep', 3)
        this.$router.push({path: '/platform/learn/monitor'})  // TODO: 这里看下根据进度跳转z
      },
      async initData () {
//        try {
//          getTask(19).then((res) => {
//            this.videoUrl = res.data.video
//          })
//        } catch (err) {
//          console.log('获取数据失败', err)
//        }
        updateStep({step: 2}).then(res => {
        })
      }
    },
    computed: {
      ctx () {
        let id = document.getElementById('the-canvas')
        return id.getContext('2d')
      }
    },
    created () {
      this.initData()
    },
    mounted () {
//      let vm = this
//      try {
//        getTask().then((res) => {
//          vm.pdfUrl = res.data.course
//          // 渲染pdf
//          PDFJS.getDocument(vm.pdfUrl).then(function (pdfDoc_) {
//            vm.pdfDoc = pdfDoc_
//            vm.page_count = vm.pdfDoc.numPages
//            vm.renderPage(vm.pageNum)
//          })
//        })
//      } catch (err) {
//        console.log('获取数据失败', err)
//      }
      // 渲染pdf
      let vm = this
//      vm.pdfUrl = this.taskINFO.pdfUrl
      PDFJS.getDocument(this.taskINFO.pdfUrl).then(function (pdfDoc_) {
        vm.pdfDoc = pdfDoc_
        vm.page_count = vm.pdfDoc.numPages
        vm.renderPage(vm.pageNum)
      })
    }
  }
</script>

<style lang="less">
  .textbook {
    .el-tabs__nav {
      width: 100%;
    }
    .el-tabs__item {
      width: 50%;
    }
  }
</style>


